<template>
  <div id="mapContainer" tabindex="0">
    <div class="mapTrainInfo">
      <div class="mapTrainItem"
           style="margin-top: 18px">车号 ： {{selectedTrain.train}}</div>
      <div class="mapTrainItem">车型 ： {{selectedTrain.type}}</div>
      <div class="mapTrainItem">运行线路 ： {{selectedTrain.line}}</div>
      <div class="mapTrainItem">客/货类型 ： {{selectedTrain.capacity}}</div>
      <div class="mapTrainItem"
           style="margin-bottom: 18px">配属 ： {{selectedTrain.administration}}{{selectedTrain.depots}}</div>
    </div>
  </div>
</template>
<script>
import AMap from 'AMap'
import trainIcon from '@/assets/png/train.png'

const TrainStatus = {
  Offline : 0 ,
  Normal : 1 ,
  Slight : 2 ,
  Medium : 3 ,
  Severe : 4
}

export default {
  name: 'myMap',
  data () {
    return {
      testTrainName: 'testTrain',
      currentStatusIndex: 0,
      trainDataMap: [],
      center: [113.143129, 27.908675],
      map: NaN,
      intervalId: 0,
      selectedTrain : {},
    }
  },
  watch: {
    "$store.state.gMonitor.trainData"(){
      this.updateTrainData(this.$store.state.gMonitor.trainData);
    }
  },
  mounted () {
    this.init();
  },
  methods: {
    init: function () {
      this.map = new AMap.Map('mapContainer', {
        zoom: 13,
        center: this.center,
        resizeEnable: true,
        mapStyle: 'amap://styles/e82bc44ea27ddbe41bec635d843826a9'
      })
      this.map.on('click', this.showInfoClick)
    },

    showInfoClick: function (e) {
      console.log('纬度: ', e.lnglat.getLat(), ' 经度: ', e.lnglat.getLng())
    },

    newMaker (train) {
      let that = this;
      let status = this.getStatus(train);
      this.$set(train,'trainMarker', new AMap.Marker({
        position: new AMap.LngLat(train.currentPos[0], train.currentPos[1]),
        offset: new AMap.Pixel(0, 0),
        anchor: 'center',
        clickable: true,
        icon: trainIcon,
        zIndex: 130
      }));

      this.$set(train,'circleMarker', new AMap.Marker({
        position: new AMap.LngLat(train.currentPos[0], train.currentPos[1]),
        offset: new AMap.Pixel(0, 0),
        anchor: 'center',
        content: `<div class=${status} id=${train.train}></div>`
      }));

      this.map.add([train.trainMarker, train.circleMarker]);
      this.map.setFitView();

      this.$nextTick(() => {
        setTimeout(() => {
          document.getElementById(train.train).onmouseout = that.moveOutT();
          document.getElementById(train.train).onmouseover = that.hoverT();
          for (let i = 0; i < document.getElementsByClassName('amap-icon').length; i++){
            document.getElementsByClassName('amap-icon')[i].onmouseout = that.moveOutT();
          }
          for (let i = 0; i < document.getElementsByClassName('amap-icon').length; i++){
            document.getElementsByClassName('amap-icon')[i].onmouseover = that.hoverT();
          }
        },200);
      });
    },
    updateMaker (train) {
      train.trainMarker.setPosition(
          new AMap.LngLat(train.currentPos[0], train.currentPos[1])
      )
      train.circleMarker.setPosition(
          new AMap.LngLat(train.currentPos[0], train.currentPos[1])
      )
    },
    moveOutT () {
      return () => {
        console.log("移出");
        document.getElementsByClassName('mapTrainInfo')[0].style.display = "none";
      }
    },
    hoverT() {
      return (e) => {
        console.log("移入",e,e.target,e.target.id);
        for(let i = 0; i < this.trainDataMap.length; i++){
          if (this.trainDataMap[i].train === e.target.id)
          {
            this.selectedTrain = this.trainDataMap[i];
            break;
          }
        }
        let obt = document.getElementsByClassName('mapTrainInfo');
        obt[0].style.top = e.pageY + 15 + 'px';
        obt[0].style.left = e.pageX + 15 + 'px';
        obt[0].style.display = "block";
      }
    },
    changeStatus (train) {
      let obt = document.getElementById(train.train);
      if (obt !== null) {
        switch (train.status) {
          case TrainStatus.Offline:
            obt.setAttribute('class', 'markerOffline')
            break
          case TrainStatus.Slight:
            obt.setAttribute('class', 'markerSlight')
            break
          case TrainStatus.Medium:
            obt.setAttribute('class', 'markerMedium')
            break
          case TrainStatus.Severe:
            obt.setAttribute('class', 'markerSevere')
            break
          case TrainStatus.Normal:
            obt.setAttribute('class', 'markerNormal')
            break
        }
      }
    },
    getStatus (train) {
      switch (train.status) {
        case TrainStatus.Offline:
          return 'markerOffline'
        case TrainStatus.Slight:
          return 'markerSlight'
        case TrainStatus.Medium:
          return 'markerMedium'
        case TrainStatus.Severe:
          return 'markerSevere'
        case TrainStatus.Normal:
          return 'markerNormal'
      }
    },
    updateTrainData (newTrainData) {
      if (newTrainData.length === this.trainDataMap.length){
        //数组长度相等，仅更新坐标和状态
        for (let i = 0; i < newTrainData.length; i++){
          if (this.trainDataMap[i].train === newTrainData[i].train){
            if (this.trainDataMap[i].status !== newTrainData[i].status){
            // if (1){
              this.trainDataMap[i].status = newTrainData[i].status;
              this.changeStatus(this.trainDataMap[i]);
            }
            if (this.trainDataMap[i].currentPos !== newTrainData[i].currentPos){
              this.trainDataMap[i].currentPos = newTrainData[i].currentPos;
              this.updateMaker(this.trainDataMap[i]);
            }
          }
        }
        return;
      }
      //数组长度不等，说明车辆数量信息有变，重新生成车辆列表
      this.trainDataMap = newTrainData;
      for (let i = 0; i < newTrainData.length; i++){
        this.newMaker(this.trainDataMap[i]);
      }
      return;
    }
  }
}
</script>

<style>
.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 22rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
  z-index: 10;
}
.amap-icon img {
  width: 16px;
  height: 19px;
}

.mapTrainInfo {
  display: none;
  position: fixed;
  z-index: 101;
  background: rgba(16, 49, 92, 0.9);
}

.mapTrainInfo  .mapTrainItem{
  width: 190px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 17px;
  margin-bottom: 12px;
  margin-left: 16px;
  margin-right: 20px;
}



.markerNormal,
.markerSlight,
.markerMedium,
.markerSevere,
.markerOffline {
  width: 32px;
  height: 32px;
  /*transform: translate3d(0px, 0px, 0px);*/
  position: relative;
  outline: none;

  border-radius: 100%;
  transform-origin: 0 0;
  display: block;
  opacity: 0.7;
  z-index: 10;
}

.markerNormal::after,
.markerSlight::after,
.markerMedium::after,
.markerSevere::after,
.markerOffline::after {
  content: '';
  -webkit-border-radius: 100%;
  border-radius: 100%;
  height: 300%;
  width: 300%;
  position: absolute;
  margin: -100% 0 0 -100%;

  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  /*无穷反复*/
  animation-delay: 0s;
}

.markerNormal,
.markerNormal::after {
  background-color: #3add64;
}

.markerSlight,
.markerSlight::after {
  background-color: #ffeb53;
}

.markerMedium,
.markerMedium::after {
  background-color: #ff9953;
}

.markerSevere,
.markerSevere::after {
  background-color: #ff6253;
}

.markerOffline,
.markerOffline::after {
  background-color: #6ba1cd;
}

@keyframes pulsate {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }

  50% {
    transform: scale(0.6);
    opacity: 1;
  }

  100% {
    transform: scale(0.7);
    opacity: 0;
  }
}

</style>
